import HModal from "@/components/ant-ext/HModal";
import {useTableActionRedux} from "@/components/ant-ext-table/redux/HAdminContext";
import {Form, Input} from "antd";
import HFormItem from "@/components/ant-ext/HFormItem";
import {useActionForm} from "@/common/hooks";
import React, {useEffect, useState} from "react";
import EntityConfig, {EntityConfigModel} from "@/api/entity-config";
import {ConfigType} from "@/const/const";
import 'react-quill/dist/quill.snow.css';
import ReactQuill from "react-quill";

const fill = [EntityConfig.EDIT];
export default function ConfigEdit() {
    const [loading, setLoading] = useState(false)
    const [isHtml, setIsHtml] = useState<boolean>(false)
    const {action, reset} = useTableActionRedux<EntityConfigModel>()
    const {form, key, title} = useActionForm(action,fill , EntityConfig.MAPPING)
    const close = () => {
        reset()
        form.resetFields()
    }
    useEffect(() => {
        if (action.match(EntityConfig.EDIT)) {
            EntityConfig.selectById({
                params: {id: action.getRow()?.id}, setLoading, success: (data) => {
                    setIsHtml(data.type === 2)
                    if (data.type === 2) {
                        form.setFieldsValue({...data, htmlContent: data.content, content: ""})
                    } else {
                        form.setFieldsValue(data)
                    }
                }
            })
        }
    }, [action, form])
    return <>
        <HModal onCancel={close} type={"setUp"} style={{width: "800px", height: "200px"}} width={800}
                confirmLoading={loading}
                onOk={form.submit}
                visible={title !== undefined}
                title={title}
        >
            <Form name={"editForm"} form={form} labelCol={{sm: 4}}
                  onValuesChange={(changedValues) => {
                      console.log(typeof changedValues.type)
                      if (changedValues.type) {
                          setIsHtml(changedValues.type === 2)
                      }
                  }}
                  onFinish={() => {
                      const val = form.getFieldsValue();
                      if (val.type === 2) {
                          val.content = val.htmlContent
                      }
                      EntityConfig.doEdit({
                          body: val, setLoading, success: () => {
                              close()
                          }
                      })
                  }}>
                <HFormItem label={"ID"} name={"id"} disabled hidden={key === EntityConfig.ADD}/>
                <HFormItem label={"配置标识"} name={"label"} required disabled={key !== EntityConfig.ADD}/>
                <HFormItem label={"配置名"} name={"labelName"} required/>
                <HFormItem label={"类型"} name={"type"}
                           dataSource={ConfigType.select}
                           type={"select"}
                           required/>

                <Form.Item
                    name={"content"}
                    label={"正文"}
                    hidden={isHtml}
                >
                    <Input.TextArea name={"content"} rows={4}/>
                </Form.Item>
                <Form.Item
                    name={"htmlContent"}
                    label={"正文"}
                    hidden={!isHtml}
                >
                    <ReactQuill style={{height: "400px", marginBottom: "50px"}} theme="snow"/>
                </Form.Item>

            </Form>
        </HModal>
    </>
}